<div class="flex h-[680px] flex-wrap">
  <div class="w-[570px] shrink-0 p-6 h-full overflow-y-auto border-r
   border-gray-100">
    <div class="mb-8">
      <div class="leading-[28px] text-lg font-bold
        bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-transparent bg-clip-text">
        {{ 'PAC.Copilot.PromptGenerator' | translate: {Default: 'Prompt Generator'} }}
      </div>
      <div class="mt-1 text-sm font-normal text-text-secondary">
        {{ 'PAC.Copilot.PromptGeneratorDesc' | translate: {Default: 'The Prompt Generator uses the configured model to optimize prompts for higher quality and better structure. Please write clear and detailed instructions.'} }}
      </div>
    </div>
    <div>
      <div class="flex items-center">
        <div class="mr-3 shrink-0 leading-[18px] text-sm font-semibold text-gray-500 uppercase">
          {{ 'PAC.Copilot.TryIt' | translate: {Default: 'Try it'} }}
        </div>
        <div
          class="grow h-px"
          style="background: linear-gradient(to right, rgb(243, 244, 246), rgba(243, 244, 246, 0))"
        ></div>
      </div>
      <div class="flex flex-wrap">
        @for (item of PRESET_INSTRUCTIONS; track $index) {
          <div class="mt-2 mr-1 shrink-0 flex h-8 items-center px-2 rounded-lg cursor-pointer font-medium
            pressable
            bg-gray-100 hover:text-indigo-500 dark:bg-slate-800"
            (click)="presetInstruction(item.key)"
          >
            <i class="{{item.icon}}"></i>
            <div class="ml-1 text-sm hover:bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:text-transparent bg-clip-text">{{ ('PAC.Copilot.PromptGenerator.' + item.key + '.name') | translate: {Default: item.name} }}</div>
          </div>
        }
      </div>
    </div>
    <div class="mt-6">
      <div class="text-[0px]">
        <div class="mb-2 leading-5 text-sm font-medium text-gray-900">
          {{ 'PAC.Copilot.Instructions' | translate: {Default: 'Instructions'} }}
        </div>
        <textarea matInput
          class="w-full h-[200px] overflow-y-auto px-3 py-2 rounded-lg text-sm bg-gray-50 dark:bg-slate-950"
          [placeholder]="'PAC.Copilot.WriteClearInstructions' | translate: {Default: 'Write clear and specific instructions.'} "
          [(ngModel)]="instructions"
        ></textarea>
      </div>
      <div class="mt-5 flex justify-end">
        <button type="button" class="btn disabled:btn-disabled btn-primary btn-medium flex space-x-1"
          (click)="generate()">
          <svg
            width="14"
            height="14"
            viewBox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4 text-white"
            data-icon="Generator"
            aria-hidden="true"
          >
            <path
              opacity="0.5"
              d="M10.5402 2.95679L10.5402 2.95685C10.4455 3.05146 10.3424 3.13459 10.2314 3.2072C10.3429 3.27923 10.4468 3.36165 10.5422 3.45535L10.5402 2.95679ZM10.5402 2.95679C10.6348 2.86217 10.718 2.75907 10.7906 2.64807C10.8626 2.75955 10.945 2.86339 11.0387 2.95881L11.0388 2.95888C11.1304 3.05224 11.2302 3.13482 11.3377 3.20717C11.2297 3.27895 11.1292 3.36081 11.0367 3.45327L11.0366 3.45333C10.9442 3.5458 10.8623 3.64635 10.7905 3.75431M10.5402 2.95679L10.7905 3.75431M10.7905 3.75431C10.7182 3.64686 10.6356 3.54707 10.5422 3.45538L10.7905 3.75431Z"
              stroke="currentColor"
              stroke-width="1.25"
            ></path>
            <path
              d="M6.99659 2.85105C6.96323 2.55641 6.71414 2.33368 6.41758 2.33337C6.12107 2.33307 5.87146 2.55529 5.83751 2.84987C5.67932 4.2213 5.27205 5.16213 4.6339 5.80028C3.99575 6.43841 3.05492 6.84569 1.68349 7.00389C1.3889 7.03784 1.16669 7.28745 1.16699 7.58396C1.1673 7.88052 1.39002 8.12961 1.68467 8.16297C3.03291 8.31569 3.99517 8.72292 4.64954 9.36546C5.30035 10.0045 5.71535 10.944 5.83593 12.3017C5.86271 12.6029 6.11523 12.8337 6.41763 12.8334C6.72009 12.833 6.97209 12.6016 6.99817 12.3003C7.11367 10.9656 7.52836 10.005 8.18344 9.34982C8.83858 8.69474 9.79922 8.28005 11.1339 8.16455C11.4352 8.13847 11.6666 7.88647 11.667 7.58402C11.6673 7.28162 11.4365 7.02909 11.1353 7.00232C9.77758 6.88174 8.83812 6.46676 8.19908 5.81592C7.55653 5.16155 7.14931 4.19929 6.99659 2.85105Z"
              fill="currentColor"
            ></path></svg
          >
          <span class="text-sm font-semibold text-white">
            {{ 'PAC.ACTIONS.Generate' | translate: {Default: 'Generate'} }}
          </span>
        </button>
      </div>
    </div>
  </div>


  <div class="w-0 grow flex relative">
    @if (!prompt()) {
      <div class="w-0 grow flex flex-col items-center px-8 justify-center h-full space-y-3">
        <svg
          width="14"
          height="14"
          viewBox="0 0 14 14"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="w-14 h-14 text-gray-300"
        >
          <path
            opacity="0.5"
            d="M10.5402 2.95679L10.5402 2.95685C10.4455 3.05146 10.3424 3.13459 10.2314 3.2072C10.3429 3.27923 10.4468 3.36165 10.5422 3.45535L10.5402 2.95679ZM10.5402 2.95679C10.6348 2.86217 10.718 2.75907 10.7906 2.64807C10.8626 2.75955 10.945 2.86339 11.0387 2.95881L11.0388 2.95888C11.1304 3.05224 11.2302 3.13482 11.3377 3.20717C11.2297 3.27895 11.1292 3.36081 11.0367 3.45327L11.0366 3.45333C10.9442 3.5458 10.8623 3.64635 10.7905 3.75431M10.5402 2.95679L10.7905 3.75431M10.7905 3.75431C10.7182 3.64686 10.6356 3.54707 10.5422 3.45538L10.7905 3.75431Z"
            stroke="currentColor"
            stroke-width="1.25"
          ></path>
          <path
            d="M6.99659 2.85105C6.96323 2.55641 6.71414 2.33368 6.41758 2.33337C6.12107 2.33307 5.87146 2.55529 5.83751 2.84987C5.67932 4.2213 5.27205 5.16213 4.6339 5.80028C3.99575 6.43841 3.05492 6.84569 1.68349 7.00389C1.3889 7.03784 1.16669 7.28745 1.16699 7.58396C1.1673 7.88052 1.39002 8.12961 1.68467 8.16297C3.03291 8.31569 3.99517 8.72292 4.64954 9.36546C5.30035 10.0045 5.71535 10.944 5.83593 12.3017C5.86271 12.6029 6.11523 12.8337 6.41763 12.8334C6.72009 12.833 6.97209 12.6016 6.99817 12.3003C7.11367 10.9656 7.52836 10.005 8.18344 9.34982C8.83858 8.69474 9.79922 8.28005 11.1339 8.16455C11.4352 8.13847 11.6666 7.88647 11.667 7.58402C11.6673 7.28162 11.4365 7.02909 11.1353 7.00232C9.77758 6.88174 8.83812 6.46676 8.19908 5.81592C7.55653 5.16155 7.14931 4.19929 6.99659 2.85105Z"
            fill="currentColor"
          ></path>
        </svg>

        <div class="leading-5 text-center text-[13px] font-normal text-gray-400">
          <div>{{ 'PAC.Copilot.DescribeYourUseCase' | translate: {Default: 'Describe your use case on the left'} }}, </div>
          <div>{{ 'PAC.Copilot.ThePromptPreview' | translate: {Default: 'the prompt preview will show here'} }}.</div>
        </div>
      </div>
    } @else {
      <div class="w-0 grow p-6 pb-0 h-full flex flex-col items-stretch">
        <div class="shrink-0 mb-3 leading-[160%] text-base font-semibold text-gray-800">
          {{ 'PAC.Copilot.GeneratedPrompt' | translate: {Default: 'Generated Prompt'} }}
        </div>
        <div class="flex-1 overflow-y-auto pb-2">
          <div class="relative shadow-md ngm-card-border-gradient">
            <div class="rounded-xl bg-[#EEF4FF]">
              <div class="flex justify-between items-center h-11 pl-3 pr-6">
                <div class="flex items-center space-x-1">
                  <div class="h2">{{ 'PAC.Copilot.Instructions' | translate: {Default: 'Instructions'} }}</div>
                </div>
                <div class="flex items-center"></div>
              </div>
              <div class="relative">
                <div
                  class="px-4 pt-2 min-h-[228px] bg-white rounded-t-xl text-sm text-gray-700 overflow-y-auto"
                  style="height: 228px"
                >
                  <div class="relative min-h-5">
                    <div
                      class="min-h-[210px] outline-none leading-5 text-sm whitespace-pre text-gray-700"
                      contenteditable="true"
                      role="textbox"
                    >
                      <p>{{prompt()}}</p>
                    </div>
                  </div>
                </div>
                <div class="pl-4 pb-2 flex bg-white rounded-b-xl">
                  <div class="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{{promptLength()}}</div>
                </div>
                <div class="absolute bottom-0 left-0 w-full flex justify-center h-2 cursor-row-resize">
                  <div class="w-5 h-[3px] rounded-sm bg-gray-300"></div>
                </div>
              </div>
            </div>
          </div>
        </div>


        <div class="flex justify-end py-4 bg-white">
          <button type="button" class="btn disabled:btn-disabled btn-secondary btn-medium"
            (click)="cancel()"
          >
            {{ 'PAC.ACTIONS.Cancel' | translate: {Default: 'Cancel'} }}
          </button>
          <button type="button" class="btn disabled:btn-disabled btn-primary btn-medium ml-2"
            [disabled]="!prompt() || loading()"
            (click)="apply()"
          >
            {{ 'PAC.ACTIONS.Apply' | translate: {Default: 'Apply'} }}
          </button>
        </div>
      </div>
    }

    @if (loading()) {
      <ngm-spin class="absolute top-0 left-0 w-full h-full" />
    }
  </div>

  <div class="absolute z-10 top-6 right-6 w-5 h-5 rounded-2xl flex items-center justify-center hover:cursor-pointer hover:bg-gray-100"
    (click)="cancel()">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-gray-500">
      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </div>
</div>
